<template>
<el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  class="list-dialog"
  :before-close="handleClose">
  <div class='list-box' v-if="obj !== null">
    <h2>访厂准备和复盘记录表</h2>
    <p style="margin-bottom: 20px">拜访时间：2024年XX月XX日</p>
    <h4>访厂前填写内容（由销售人员填写并尽早发送至协助接待领导，最迟提前一天发送）</h4>
    <h3>背调事项</h3>
    <div class="list-form">
      <div class="form-lable">客户名称</div>
      <div class="form-input">
        <span v-if="type === 'show'">{{ obj.name }}</span>
        <el-input v-else type="text" v-model="obj.name" />
      </div>
      <div class="form-lable">客户级别</div>
      <div class="form-input">
        <span v-if="type === 'show'">{{ obj.level }}</span>
        <el-input v-else type="text" v-model="obj.level" />
      </div>
      <div class="form-lable">客户性质</div>
      <div class="form-input">
        <span v-if="type === 'show'">{{ obj.nature }}</span>
        <el-input v-else type="text" v-model="obj.nature" />
      </div>
      <div class="form-lable">项目名称</div>
      <div class="form-input">
        <span v-if="type === 'show'">{{ obj.entryName }}</span>
        <el-input v-else type="text" v-model="obj.entryName" />
      </div>
      <div class="form-lable">项目或业主行业</div>
      <div class="form-input">
        <span v-if="type === 'show'">{{ obj.industry }}</span>
        <el-input v-else type="text" v-model="obj.industry" />
      </div>
      <div class="form-lable">建议推荐产品</div>
      <div class="form-input">
        <span v-if="type === 'show'">{{ obj.suggestProducts }}</span>
        <el-input v-else type="text" v-model="obj.suggestProducts" />
      </div>
      <div class="form-lable">项目预计签单金额（万元）</div>
      <div class="form-input">
        <span v-if="type === 'show'">{{ obj.money }}</span>
        <el-input v-else type="text" v-model="obj.money" />
      </div>
      <div class="form-lable">项目目前所处阶段</div>
      <div class="form-input">
        <span v-if="type === 'show'">{{ obj.stage }}</span>
        <el-input v-else type="text" v-model="obj.stage" />
      </div>
      <div class="form-lable">过往典型行业或地区案例</div>
      <div class="form-textarea">
        <span v-if="type === 'show'">{{ obj.case }}</span>
        <el-input v-else type="textarea" :rows="6" v-model="obj.case" />
      </div>
      <div class="form-lable">客户关键需求点</div>
      <div class="form-textarea">
        <span v-if="type === 'show'">{{ obj.demandPoints }}</span>
        <el-input v-else type="textarea" :rows="6" v-model="obj.demandPoints" />
      </div>
      <div class="form-lable">目前项目推进存在的挑战</div>
      <div class="form-textarea">
        <span v-if="type === 'show'">{{ obj.challenge }}</span>
        <el-input v-else type="textarea" :rows="6" v-model="obj.challenge" />
      </div>
      <div class="form-lable">客户来访人员</div>
      <div :class="['form-table form-table1', { 'form-table2': type !== 'show' } ]">
        <div class="form-th">
          <div>姓名</div>
          <div>部门</div>
          <div>职位</div>
          <div>角色</div>
          <div>建议我司对接人员</div>
        </div>
        <div class="form-list-box">
          <div class="form-list" v-for="(item) in obj.personList" :key="item.id">
            <div>
              <span v-if="type === 'show'">{{ item.name }}</span>
              <el-input v-else type="text" v-model="item.name" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.department }}</span>
              <el-input v-else type="text" v-model="item.department" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.position }}</span>
              <el-input v-else type="text" v-model="item.position" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.role }}</span>
              <el-input v-else type="text" v-model="item.role" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.person }}</span>
              <el-input v-else type="text" v-model="item.person" />
            </div>
            <div class="form-btn" v-if="type !== 'show'">
              <el-link type="primary" @click="addPsonList">增加</el-link>
              <el-link type="primary" @click="deletePersonList(item)">删除</el-link>
            </div>
          </div>
        </div>
      </div>
      <div class="form-lable">访厂目的</div>
      <div :class="['form-table form-table3', { 'form-table4': type !== 'show' } ]">
        <div class="form-th">
          <div>目的</div>
          <div>是否达成（访厂后评估）</div>
        </div>
        <div class="form-list-box">
          <div class="form-list" v-for="(item) in obj.aimList" :key="item.id">
            <div>
              <span v-if="type === 'show'">{{ item.title }}</span>
              <el-input v-else type="text" v-model="item.title" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.isReach }}</span>
              <el-select v-else v-model="item.isReach" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
            <div class="form-btn" v-if="type !== 'show'">
              <el-link type="primary" @click="addAimList">增加</el-link>
              <el-link type="primary" @click="deleteAimList(item)">删除</el-link>
            </div>
          </div>
        </div>
      </div>
      <div class="form-lable">访厂前资料准备</div>
      <div class="form-table" :class="['form-table form-table5', { 'form-table6': type !== 'show' } ]">
        <div class="form-th">
          <div>项目定制资料</div>
          <div>责任人（填写具体人名）</div>
          <div>完成时间</div>
        </div>
        <div class="form-list-box">
          <div class="form-list" v-for="(item) in obj.informationList" :key="item.id">
            <div>
              <span v-if="type === 'show'">{{ item.name }}</span>
              <el-input v-else type="text" v-model="item.name" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.person }}</span>
              <el-input v-else type="text" v-model="item.person" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.status }}</span>
              <el-input v-else type="text" v-model="item.status" />
            </div>
            <div class="form-btn" v-if="type !== 'show'">
              <el-link type="primary" @click="addInformationList">增加</el-link>
              <el-link type="primary" @click="deleteInformationList(item)">删除</el-link>
            </div>
          </div>
        </div>
      </div>
      <h3>访厂后填写内容</h3>
      <div class="form-lable">实际来访人员</div>
      <div :class="['form-table form-table1', { 'form-table2': type !== 'show' } ]">
        <div class="form-th">
          <div>姓名</div>
          <div>部门</div>
          <div>职位</div>
          <div>角色</div>
          <div>我司实际对接人员</div>
        </div>
        <div class="form-list-box">
          <div class="form-list" v-for="(item) in obj.actualList" :key="item.id">
            <div>
              <span v-if="type === 'show'">{{ item.name }}</span>
              <el-input v-else type="text" v-model="item.name" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.department }}</span>
              <el-input v-else type="text" v-model="item.department" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.position }}</span>
              <el-input v-else type="text" v-model="item.position" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.role }}</span>
              <el-input v-else type="text" v-model="item.role" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.person }}</span>
              <el-input v-else type="text" v-model="item.person" />
            </div>
            <div class="form-btn" v-if="type !== 'show'">
              <el-link type="primary" @click="addActualList">增加</el-link>
              <el-link type="primary" @click="deleterActualList(item)">删除</el-link>
            </div>
          </div>
        </div>
      </div>
      <div class="form-lable">重要信息记录</div>
      <div class="form-textarea">
        <span v-if="type === 'show'">{{ obj.importantInformation }}</span>
        <el-input v-else type="textarea" :rows="6" v-model="obj.importantInformation" />
      </div>
      <div class="form-lable">访厂后的下一步行动</div>
      <div :class="['form-table form-table7', { 'form-table8': type !== 'show' } ]">
        <div class="form-th">
          <div>目前存在的问题</div>
          <div>解决方案和下一步行动</div>
          <div>责任人</div>
          <div>计划完成时间</div>
        </div>
        <div class="form-list-box">
          <div class="form-list" v-for="(item) in obj.actionList" :key="item.id">
            <div>
              <span v-if="type === 'show'">{{ item.problem }}</span>
              <el-input v-else type="text" v-model="item.problem" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.action }}</span>
              <el-input v-else type="text" v-model="item.action" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.person }}</span>
              <el-input v-else type="text" v-model="item.person" />
            </div>
            <div>
              <span v-if="type === 'show'">{{ item.time }}</span>
              <el-input v-else type="text" v-model="item.time" />
            </div>
            <div class="form-btn" v-if="type !== 'show'">
              <el-link type="primary" @click="addActionList">增加</el-link>
              <el-link type="primary" @click="deleteActionList(item)">删除</el-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      // show/add/edit
      type: '',
      dialogVisible: false,
      obj: null,
      options: ['是', '否']
    }
  },
  mounted() {},
  methods: {
    handleOpen(type, item) {
      this.type = type
      if (this.type === 'show') {
        this.title = '查看'
        this.obj = item
      }
      if (this.type === 'add') {
        this.title = '新增'
        this.obj = {
          id: new Date().getTime(),
          name: '',
          ddr: '',
          importantInformation: '',
          aimList: [
            {
              id: '1',
              title: '',
              isReach: ''
            }
          ],
          planPerson: [
            {
              id: '1',
              departmentDuties: '',
              name: '',
              role: ''
            }
          ],
          personList: [
            {
              id: '1',
              departmentDuties: '',
              name: '',
              role: ''
            }
          ],
          outlineList: [
            {
              id: '1',
              content: ''
            }
          ],
          informationList: [
            {
              id: '1',
              name: '',
              person: '',
              status: ''
            }
          ],
          actualList: [
            {
              id: '1',
              departmentDuties: '',
              name: '',
              role: ''
            }
          ],
          actionList: [
            {
              id: '1',
              content: '',
              person: '',
              time: ''
            }
          ],
          other: ''
        }
      }
      if (this.type === 'edit') {
        this.title = '编辑'
        this.obj = item
      }
      this.dialogVisible = true
    },
    handleSelectionChange(val, a) {
      this.multipleSelection = val
    },
    deleteKey() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择操作行')
      } else {
        this.multipleSelection.map((obj) => {
          for (let i = this.keyInfo.length; i >= 0; i--) {
            const index = this.keyInfo.findIndex((item) => item.id === obj.id)
            if (index !== -1) this.keyInfo.splice(index, 1)
          }
        })
      }
    },
    addKey() {
      this.keyInfo.push({
        id: new Date().getTime(),
        dimension: '',
        weight: 0,
        wsd: 0,
        dw: 0,
        btl: 0,
        dfc: 0,
        des: ''
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    addPsonList() {
      this.obj.personList.push({
        id: new Date().getTime(),
        name: '',
        department: '',
        position: '',
        role: '',
        person: ''
      })
    },
    deletePersonList(obj) {
      const index = this.obj.personList.findIndex((item) => item.id === obj.id)
      if (index !== -1) this.obj.personList.splice(index, 1)
      if (this.obj.personList.length === 0) {
        this.obj.personList.push({
          id: new Date().getTime(),
          name: '',
          department: '',
          position: '',
          role: '',
          person: ''
        })
      }
    },
    addAimList() {
      this.obj.aimList.push({
        id: new Date().getTime(),
        title: '',
        isReach: ''
      })
    },
    deleteAimList(obj) {
      const index = this.obj.aimList.findIndex((item) => item.id === obj.id)
      if (index !== -1) this.obj.aimList.splice(index, 1)
      if (this.obj.aimList.length === 0) {
        this.obj.aimList.push({
          id: new Date().getTime(),
          title: '',
          isReach: ''
        })
      }
    },
    addInformationList() {
      this.obj.informationList.push({
        id: new Date().getTime(),
        name: '',
        person: '',
        status: ''
      })
    },
    deleteInformationList(obj) {
      const index = this.obj.informationList.findIndex((item) => item.id === obj.id)
      if (index !== -1) this.obj.informationList.splice(index, 1)
      if (this.obj.informationList.length === 0) {
        this.obj.informationList.push({
          id: new Date().getTime(),
          name: '',
          person: '',
          status: ''
        })
      }
    },
    addActualList() {
      this.obj.actualList.push({
        id: new Date().getTime(),
        name: '',
        department: '',
        position: '',
        role: '',
        person: ''
      })
    },
    deleterActualList(obj) {
      const index = this.obj.actualList.findIndex((item) => item.id === obj.id)
      if (index !== -1) this.obj.actualList.splice(index, 1)
      if (this.obj.actualList.length === 0) {
        this.obj.actualList.push({
          id: new Date().getTime(),
          name: '',
          department: '',
          position: '',
          role: '',
          person: ''
        })
      }
    },
    addActionList() {
      this.obj.actionList.push({
        id: new Date().getTime(),
        problem: '',
        action: '',
        person: '',
        time: ''
      })
    },
    deleteActionList(obj) {
      const index = this.obj.actionList.findIndex((item) => item.id === obj.id)
      if (index !== -1) this.obj.actionList.splice(index, 1)
      if (this.obj.actionList.length === 0) {
        this.obj.actionList.push({
          id: new Date().getTime(),
          problem: '',
          action: '',
          person: '',
          time: ''
        })
      }
    }
  }
}
</script>
<style>
.list-dialog .el-dialog {
  width: 95%;
  height: 95vh;
  margin: 2.5vh auto !important;
}
.list-dialog .el-dialog .el-dialog__body {
  height: calc(100% - 116px);
  overflow: auto;
}
.list-box h2 {
  margin-bottom: 10px;
  color: #000000;
}
.list-box h3 {
  margin-bottom: 10px;
  color: #000000;
}
.list-box h4 {
  margin-bottom: 10px;
  color: #000000;
  font-style: italic;
}

.list-box .el-input__inner {
  border-radius: 0;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #000000;
  padding:0 5px ;
}
.list-box .el-select {
  width: 100%;
}
.list-box .el-select .el-input__icon {
  line-height: 28px;
  color: #000000;
}
.list-box .list-table .item>div:nth-of-type(1) .el-input__inner {
  font-weight: bold;
}
.list-box .list-table .item>div .el-select {
  width: 100%;
}
.list-box .list-table .item>div .el-select .el-input__icon {
  line-height: 28px;
  color: #000000;
}
.list-box .el-button {
  padding: 8px 20px;
}
.list-box .el-button--warning, .list-box .el-button--warning:focus, .list-box .el-button--warning:hover {
  background: #ff8000;
  border-color: #ff8000;
}
.list-box .el-link--inner {
 padding: 0 10px;
}
.list-box .el-table .el-table__cell {
  padding: 0 0;
}
.list-box .el-table thead {
  color: #000000;
}
.list-box .el-table--border .el-table__cell,
.list-box .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #000000;
}
.list-box .el-table td.el-table__cell,
.list-box  .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #000000;
}

.list-box  .el-table--border,
.list-box  .el-table--group {
  border: 2px solid #000000;
}
.list-box .el-table--border th.el-table__cell {
  border-bottom: 1px solid #000000;
}
.list-box .el-table .el-input__inner {
  border-radius: 0;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #000000;
  padding:0 5px ;
}
.list-box  .el-table {
  color: #000000;
}
.list-box  .el-table .cell {
  padding-left: 0;
  padding-right: 0;
}
.list-box .el-table--border .el-table__cell:first-child .cell {
   padding-left: 0;
   padding-right: 0;
}
.list-box .page-box {
  margin-top: 10PX;
}
.list-box .page-box .el-pagination {
  text-align: right;
}
.list-box .el-input-number {
  width: 100%;
  line-height: 28px;
}
.list-box .swot-box {
  overflow: hidden;
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
}
.list-box .swot-box .label {
  width: 50%;
  float: left;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.list-box .swot-box .content {
  overflow: hidden;
  width: 50%;
  float: left;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.list-box .swot-box .content .el-input__inner {
  border-radius: 0;
  height: 28px;
  line-height: 29px;
  font-size: 12px;
  color: #000000;
  padding:0 5px ;
}
.list-box .btn-box {
  float: right;
}

.list-form {
  overflow: hidden;
}
.list-form .form-lable {
  width: 270px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: #000000;
  font-weight: bold;
  float: left;
  clear: both;
  margin-bottom: 15px;
}
.list-form .form-input {
  width: calc(100% - 270px);
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: #000000;
  float: left;
  border: 1px solid #000000;
  overflow: hidden;
}
.list-form .form-textarea {
  width: calc(100% - 270px);
  height: 112px;
  line-height: 20px;
  font-size: 14px;
  color: #000000;
  float: left;
  border: 1px solid #000000;
  overflow: hidden;
  margin-bottom: 15px;
}
.list-form .form-input>span, .list-form .form-textarea>span {
  padding: 0 5px;
}
.list-form .form-textarea .el-textarea__inner {
  padding: 0 5px;
  font-size: 12px;
  color: #000000;
}
.list-form .form-table {
  width: calc(100% - 270px);
  float: left;
  font-size: 14px;
  color: #000000;
  /* clear: both; */
  margin-bottom: 15px;
}
.list-form .form-table .form-th {
  font-weight: bold;
  overflow: hidden;
}
.list-form .form-table .form-th>div {
  float: left;
  height: 28px;
  line-height: 28px;
}
.list-form .form-table.form-table1 .form-th>div {
  width: 20%;
}
.list-form .form-table.form-table2 .form-th>div {
  width: 16%;
}
.list-form .form-table.form-table3 .form-th>div:nth-of-type(1) {
  width: 60%;
}
.list-form .form-table.form-table3 .form-th>div:nth-of-type(2) {
  width: 40%;
}
.list-form .form-table.form-table4 .form-th>div:nth-of-type(1) {
  width: 40%;
}
.list-form .form-table.form-table5 .form-th>div {
  width: 20%;
}
.list-form .form-table.form-table5 .form-th>div:nth-of-type(1) {
  width: 60%;
}
.list-form .form-table.form-table6 .form-th>div:nth-of-type(1) {
  width: 40%;
}
.list-form .form-table.form-table7 .form-th>div {
  width: 25%;
}
.list-form .form-table.form-table8 .form-th>div {
  width: 20%;
}
.list-form .form-table .form-list-box {
  overflow: hidden;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
}
.list-form .form-table .form-list-box .form-list>div {
  float: left;
  height: 28px;
  line-height: 28px;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
  overflow: hidden;
}
.list-form .form-table.form-table1 .form-list-box .form-list>div {
  width: 20%;
}
.list-form .form-table.form-table2 .form-list-box .form-list>div {
  width: 16%;
}
.list-form .form-table .form-list-box .form-list>div>span {
  padding: 0 5px;
}
.list-form .form-table.form-table3 .form-list-box .form-list>div:nth-of-type(1) {
  width: 60%;
}
.list-form .form-table.form-table3 .form-list-box .form-list>div:nth-of-type(2) {
  width: 40%;
}
.list-form .form-table.form-table4 .form-list-box .form-list>div:nth-of-type(1) {
  width: 40%;
}
.list-form .form-table.form-table5 .form-list-box .form-list>div {
  width: 20%;
}
.list-form .form-table.form-table5 .form-list-box .form-list>div:nth-of-type(1) {
  width: 60%;
}
.list-form .form-table.form-table6 .form-list-box .form-list>div:nth-of-type(1) {
  width: 40%;
}
.list-form .form-table.form-table7 .form-list-box .form-list>div {
  width: 25%;
}
.list-form .form-table.form-table8 .form-list-box .form-list>div {
  width: 20%;
}
.list-form .form-table .form-list-box .form-list .form-btn {
  width: 20% !important;
  float: left;
  height: 28px;
  line-height: 28px;
  border-right: 1px solid #000000 !important;
  border-bottom: 1px solid #000000;
  text-align: center;
  overflow: hidden;
}
</style>
